<template>
  <div style="min-height: 500px" class="row q-col-gutter-x-md">
    <div class="col-lg-3 col-md-5"  style="height:800px;overflow:auto;">
      <q-card>
        <q-card-section style="min-height:800px;">
          <div v-if="dataMenu.length == 0">暂无菜单,请点击<a style="color:red;cursor:pointer" @click="add(dialog=-1)">新增</a>添加菜单</div>
          <q-tree
            v-else
            ref="orgTree"
            :nodes="dataMenu"
            :selected.sync="menuSelected"
            :expanded.sync="menuExpanded"
            selected-color="primary"
            node-key="id"
            label-key="name"
          >
            <template v-slot:header-root="prop">
                <div class="row">
                  <q-badge v-if="prop.node.isLeaf == 1" transparent align="middle" color="primary">
                    功能
                  </q-badge>
                  <q-badge v-if="prop.node.isLeaf != 1" transparent align="middle" color="orange">
                    菜单
                  </q-badge>
                  <div v-if="prop.node.isLeaf == 1" class="text-weight-bold ellipsis q-ml-xs" :title="prop.node.kjCode + ' - ' + prop.node.name">{{ prop.node.kjCode + ' - ' + prop.node.name }}</div>
                  <div v-else class="text-weight-bold ellipsis q-ml-xs">{{ prop.node.code === null? prop.node.name : prop.node.code + ' - ' + prop.node.name }}</div>
                </div>
                <q-popup-proxy context-menu>
                  <q-list dense class="text-grey" v-show="prop.node.isLeaf !== 1">
                    <q-item v-show="prop.node.parentId !== '0'" clickable v-close-popup @click="add(dialog=1,prop.node)">
                      <q-item-section>
                        <q-item-label>新增平级菜单</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="add(dialog=3,prop.node)">
                      <q-item-section>
                        <q-item-label>新增下级菜单</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="add(dialog=2,prop.node)">
                      <q-item-section>
                        <q-item-label>新增功能</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="edit(prop.node)">
                      <q-item-section>
                        <q-item-label>修改</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="deletes(prop.node)">
                      <q-item-section>
                        <q-item-label>删除</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                  <q-list dense class="text-grey" v-show="prop.node.isLeaf == 1">
                    <q-item clickable v-close-popup @click="edit(prop.node)">
                      <q-item-section>
                        <q-item-label>修改</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="deletes(prop.node)">
                      <q-item-section>
                        <q-item-label>删除</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-popup-proxy>
              </template>
          </q-tree>
        </q-card-section>
      </q-card>
    </div>
    <div class="col-lg-9 col-md-7" v-show="menuSelected != null">
      <q-card>
        <q-card-section style="min-height:800px;">
          <q-tabs
            v-model="tabs"
            dense
            class="bg-grey-2 text-teal"
            active-color="primary"
            indicator-color="primary"
            align="left"
            narrow-indicator>
              <q-tab name="tab1" :label="$t('基本信息')" />
          </q-tabs>
          <q-tab-panels v-model="tabs" animated>
            <q-tab-panel name="tab1" style="padding:3px;">
              <div class="row" style="font-size:14px;padding:10px;">
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">编码：</span>
                  <span class="q-my-xs">{{ baseItenForm.code }}</span>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">名称：</span>
                  <span class="q-my-xs">{{ baseItenForm.name }}</span>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">类型：</span>
                  <q-chip dense square label="菜单" color="negative" text-color="white" v-if="baseItenForm.viewType ===1"/>
                  <q-chip dense square label="功能" color="positive" text-color="white" v-else/>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">是否允许新增下级：</span>
                  <q-chip dense square label="否" color="negative" text-color="white" v-if="baseItenForm.isLeaf ===1"/>
                  <q-chip dense square label="是" color="positive" text-color="white" v-else/>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">创建人：</span>
                  <span class="q-my-xs">{{baseItenForm.createUserName}}</span>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">创建时间：</span>
                  <span class="q-my-xs">{{ baseItenForm.createTime }}</span>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">最近更新时间：</span>
                  <span class="q-my-xs">{{ baseItenForm.lastUpdateTime }}</span>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
                  <span class="q-my-xs text-weight-bold">最近更新人：</span>
                  <span class="q-my-xs">{{ baseItenForm.updateUserName }}</span>
                </div>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>
     <!-- <q-card>
        <q-card-section>
          <q-stepper
            v-model="step"
            vertical
            flat
            color="light-blue"
            active-color="light-blue"
            animated
          >
            <q-step
              :name="1"
              title="按钮"
              icon="fas fa-user-tag"
              active-icon="fas fa-user-tag"
              @click="step = 1"
            >
              <q-table
                flat
                dense
                class="bg-white"
                :data="dataButtom"
                :columns="columnsButtom"
                row-key="id"
                separator="cell"
                selection="multiple"
                :selected.sync="selectedButtom"
                :filter="searchFormButtom"
                :pagination.sync="paginationButtom"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
              >
                <template v-slot:header="props">
                  <q-tr :props="props" style="height:36px">
                    <q-th>
                      <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                    </q-th>
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                      {{ col.label }}
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props" style="height:36px">
                    <q-td width="52">
                      <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    <q-td key="roleName" :props="props">{{ props.row.roleName }}</q-td>
                    <q-td key="roleCode" :props="props">{{ props.row.roleCode  }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props"> -->
                  <!-- <q-pagination
                    v-model="paginationRole.page"
                    color="blue"
                    :max-pages="5"
                    :max="pagesRole"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  /> -->
                  <!-- <q-pagination
                    v-model="paginationButtom.page"
                    :max="pagesButtom"
                    :input="true"
                  >
                  </q-pagination>
                  共 {{ totalButtom }} 条
                </template>
              </q-table>
            </q-step>
            <q-step
              :name="2"
              title="字段"
              icon="fas fa-user-tag"
              active-icon="fas fa-user-tag"
              @click="step = 2"
            >
            <q-table
                flat
                dense
                class="bg-white"
                :data="dataField"
                :columns="columnsField"
                row-key="id"
                separator="cell"
                selection="multiple"
                :selected.sync="selectedField"
                :filter="searchFormField"
                :pagination.sync="paginationField"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
              >
                <template v-slot:header="props">
                  <q-tr :props="props" style="height:36px">
                    <q-th>
                      <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                    </q-th>
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                      {{ col.label }}
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props" style="height:36px">
                    <q-td width="52">
                      <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    <q-td key="roleName" :props="props">{{ props.row.roleName }}</q-td>
                    <q-td key="roleCode" :props="props">{{ props.row.roleCode  }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="paginationField.page"
                    :max="pagesField"
                    :input="true"
                  >
                  </q-pagination>
                  共 {{ totalField }} 条
                </template>
              </q-table>
            </q-step>
          </q-stepper>
        </q-card-section>
      </q-card> -->
    </div>
    <q-dialog
      v-model="addOrEditDialog"
      persistent
      :maximized="maximizedToggle"
      transition-show="slide-up"
      transition-hide="slide-down">
      <q-card class="bg-white relative-position" style="minWidth:40vw">
        <q-bar class="bg-white q-py-lg">
          <strong>{{ addOrEdit === 1? '新增' : '修改'}}</strong>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" @click="addOrEditDialog = false">
            <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-separator />
        <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
            <q-tabs
              v-model="addOrEditTab"
              dense
              class="text-grey-9"
              active-color="primary"
              indicator-color="primary"
              align="left"
              :breakpoint="0"
              narrow-indicator
            >
              <q-tab name="tab1" :label="dialog==2?'功能信息':'菜单信息'" />
              <q-tab name="tab2" label="所属功能" v-show="dialog==2"/>
            </q-tabs>
            <q-separator />
            <q-tab-panels v-model="addOrEditTab" animated>
              <q-tab-panel name="tab1">
                <div class="row q-col-gutter-sm">
                  <div class="col-12">
                    <div :class="$v.addOrEditForm.name.$error?'text-negative': ''">{{dialog==2?"功能名称":"菜单名称"}}</div>
                    <q-input
                      v-model="addOrEditForm.name"
                      error-message="该字段为必填项"
                      :error="$v.addOrEditForm.name.$error"
                      @blur="$v.addOrEditForm.name.$touch"
                      dense hint/>
                  </div>
                  <div class="col-12">
                    <div>{{dialog==2?"功能英文名称":"菜单英文名称"}}</div>
                    <q-input
                      v-model="addOrEditForm.nameEn"
                      dense hint/>
                  </div>
                  <div class="col-12" v-show="dialog ==2">
                    <div :class="$v.addOrEditForm.code.$error?'text-negative': ''">{{'功能编码'}}</div>
                    <q-input
                      v-model="addOrEditForm.code"
                      error-message="该字段为必填项"
                      :error="$v.addOrEditForm.code.$error"
                      @blur="$v.addOrEditForm.code.$touch"
                      dense hint/>
                  </div>
                  <div class="col-12">
                    <div>说明</div>
                    <q-input
                      type="textarea"
                      v-model="addOrEditForm.nameEn"
                      dense hint/>
                  </div>
                </div>
              </q-tab-panel>
              <q-tab-panel name="tab2">
                <q-tree
                  ref="orgTree"
                  :nodes="data"
                  node-key="id"
                  label-key="name"
                  tick-strategy="strict"
                  :ticked.sync="nodeTicked"
                  :selected.sync="nodeSelected"
                  @update:ticked="tickeds"
                  selected-color="primary"
                  :expanded.sync="nodeExpanded"
                >
                  <template v-slot:header-root="prop">
                    <div class="row items-center" style="width:100%">
                      <q-badge transparent align="middle" color="primary">
                        菜单
                      </q-badge>
                      <div class="text-weight-bold ellipsis q-ml-xs" style="width:80%" :title="prop.node.kjCode + ' - ' + prop.node.name">{{ prop.node.kjCode + ' - ' + prop.node.name }}</div>
                    </div>
                  </template>
                  <template v-slot:header-header="prop">
                    <div class="row items-center" style="width:100%">
                      <q-badge transparent align="middle" color="orange">
                        tab
                      </q-badge>
                      <div class="text-weight-bold ellipsis q-ml-xs" style="width:80%" :title="prop.node.kjCode + ' - ' + prop.node.name">{{ prop.node.kjCode + ' - ' + prop.node.name }}</div>
                    </div>
                  </template>
                </q-tree>
              </q-tab-panel>
            </q-tab-panels>
        </q-card-section>
        <q-separator class="absolute" style="bottom: 52px; left: 0"/>
        <q-card-actions align="right" class="absolute-bottom bg-white">
          <q-btn flat label="取消" color="primary" v-close-popup />
          <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="save"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import { transformToTreeFormat } from 'src/utils/fns'
import { required, requiredIf } from 'vuelidate/lib/validators'
export default {
  name: 'Menu',
  props: {
    menudata: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      // 基本细腻
      baseItenForm: {
        code: '',
        name: '',
        nameEn: '',
        isLeaf: '',
        createTime: '',
        createUserName: '',
        updateUserName: '',
        lastUpdateTime: ''
      },
      tabs: 'tab1',
      // 树
      menuSelected: '',
      menuExpanded: [],
      dataMenu: [],
      // 弹框
      addOrEditTab: 'tab1',
      dialog: 2, // 1:菜单 2:功能
      addOrEditDialog: false,
      maximizedToggle: false,
      loadingSave: false,
      addOrEdit: 1,
      addOrEditForm: {
        id: '',
        name: '',
        code: '',
        parentId: 0,
        remark: '',
        nameEn: '',
        viewType: 1
      },
      menu: [],
      step: 1,
      data: [],
      nodeSelected: [],
      nodeExpanded: [],
      nodeTicked: [],
      ids: [],
      dataField: [],
      searchFormField: {
        roleName: '',
        roleCode: '',
        createTime: ''
      },
      totalField: '',
      selectedField: [],
      paginationField: {
        page: 1,
        rowsPerPage: 5,
        rowsNumber: 5,
        sortBy: '',
        descending: Boolean
      },
      dataButtom: [],
      searchFormButtom: {
        roleName: '',
        roleCode: '',
        createTime: ''
      },
      totalButtom: '',
      selectedButtom: [],
      paginationButtom: {
        page: 1,
        rowsPerPage: 5,
        rowsNumber: 5,
        sortBy: '',
        descending: Boolean
      },
      dataTable: [],
      searchFormTable: {
        roleName: '',
        roleCode: '',
        createTime: ''
      },
      totalTable: '',
      tableId: '',
      selectedTable: [],
      paginationTable: {
        page: 1,
        rowsPerPage: 5,
        rowsNumber: 5,
        sortBy: '',
        descending: Boolean
      },
      columnsButtom: [
        { name: 'roleName', required: true, label: '按钮名称', align: 'left', field: 'roleName', sortable: true },
        { name: 'roleCode', required: true, label: '按纽编码', align: 'left', field: 'roleCode', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      columnsTable: [
        { name: 'roleName', required: true, label: 'Tab页名称', align: 'left', field: 'roleName', sortable: true },
        { name: 'roleCode', required: true, label: 'Tab页编码', align: 'left', field: 'roleCode', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      columnsField: [
        { name: 'roleName', required: true, label: '字段名称', align: 'left', field: 'roleName', sortable: true },
        { name: 'roleCode', required: true, label: '字段编码', align: 'left', field: 'roleCode', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ]
    }
  },

  created () {
    this.getMenu()
    this.getSeletMenu()
  },
  validations: {
    addOrEditForm: {
      name: { required },
      code: {
        required: requiredIf(function () {
          return this.dialog === 2
        })
      }
    }
  },
  watch: {
    'step' () {
      this.getTable()
    },
    'menuSelected' () {
      console.log('11111111111111111')
      this.getbase()
    },
    'nodeSelected' () {
      this.tableId = this.nodeSelected
      this.getTable()
      console.log(this.$refs.orgTree.getNodeByKey(this.nodeSelected))
    }
  },
  computed: {
    pagesButtom () {
      return Math.ceil(this.totalButtom / this.paginationButtom.rowsPerPage)
    },
    pagesField () {
      return Math.ceil(this.totalField / this.paginationField.rowsPerPage)
    }
  },
  methods: {
    // 单选
    tickeds (ticked) {
      if (ticked.length > 1) {
        this.nodeTicked = [ticked[1]]
      }
    },
    // 展示基本信息
    getbase () {
      this.$api({
        method: 'get',
        url: `/mdm/usercustomview/findById/${this.menuSelected}`,
        emulateJSON: true,
        successCallback: ({ data }) => {
          this.baseItenForm = { ...data }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    // 删除
    deletes (prop) {
      console.log('11111111')
      this.$api({
        method: 'delete',
        url: `/mdm/usercustomview/delete/${prop.id}`,
        emulateJSON: true,
        useLoadLayer: true,
        useNotify: true,
        successCallback: ({ data }) => {
          // console.log(data)
          // this.addOrEditDialog = false
          this.getSeletMenu()
        },
        errorCallback: (err) => {
          console.log(err)
        }
      })
    },
    edit (prop) {
      this.addOrEdit = 2
      this.addOrEditTab = 'tab1'
      this.dialog = 1
      if (prop.isLeaf === 1) {
        this.dialog = 2
        this.addOrEditForm = {
          id: prop.id,
          name: prop.name,
          parentId: prop.parentId,
          code: prop.kjCode,
          nameEn: prop.nameEn,
          remark: prop.remark,
          viewType: prop.viewType
        }
        this.nodeTicked.push(prop.viewId)
      } else {
        this.addOrEditForm = {
          id: prop.id,
          name: prop.name,
          parentId: prop.parentId,
          code: prop.kjCode,
          nameEn: prop.nameEn,
          remark: prop.remark,
          viewType: prop.viewType
        }
        this.nodeTicked = []
      }
      this.addOrEditDialog = true
    },
    add (dialog, prop) {
      this.addOrEdit = 1
      this.$v.addOrEditForm.$reset()
      this.nodeTicked = []
      if (dialog === 2) {
        this.addOrEditForm = {
          id: '',
          name: '',
          parentId: prop.id,
          code: '',
          nameEn: '',
          remark: '',
          viewType: 0
        }
      }
      if (dialog === -1) {
        this.addOrEditForm = {
          id: '',
          name: '',
          parentId: 0,
          code: '',
          nameEn: '',
          remark: '',
          viewType: 1
        }
      }
      if (dialog === 1) {
        this.addOrEditForm = {
          id: '',
          name: '',
          parentId: prop.parentId,
          kjCode: '',
          nameEn: '',
          remark: '',
          viewType: 1
        }
      }
      if (dialog === 3) {
        this.addOrEditForm = {
          id: '',
          name: '',
          parentId: prop.id,
          kjCode: '',
          nameEn: '',
          remark: '',
          viewType: 1
        }
      }
      this.addOrEditDialog = true
      this.addOrEditTab = 'tab1'
    },
    save () {
      this.$v.addOrEditForm.$touch()
      if (!this.$v.addOrEditForm.$error) {
        if (this.dialog === 2 && this.nodeTicked.length === 0) {
          this.$q.notify({
            message: '请选择菜单对应的产品功能',
            color: 'negative',
            icon: 'error_outline',
            position: 'top-right',
            timeout: 3000
          })
        } else {
          this.$api({
            method: 'put',
            url: this.addOrEdit === 1 ? '/mdm/usercustomview/add' : '/mdm/usercustomview/update',
            params: {
              id: this.addOrEditForm.id,
              name: this.addOrEditForm.name,
              parentId: this.addOrEditForm.parentId,
              kjCode: this.addOrEditForm.code,
              nameEn: this.addOrEditForm.nameEn,
              remark: this.addOrEditForm.remark,
              viewType: this.addOrEditForm.viewType,
              viewId: this.nodeTicked.join(',')
            },
            emulateJSON: true,
            useLoadLayer: true,
            useNotify: true,
            successCallback: ({ data }) => {
              // console.log(data)
              this.addOrEditDialog = false
              this.getSeletMenu()
            },
            errorCallback: (err) => {
              console.log(err)
            }
          })
        }
      }
    },
    getTable () {
      let type = ''
      switch (this.step) {
        case 1:
          type = 1
          break
        case 2:
          type = -1
          break
      }
      console.log(this.tableId)
      console.log(type)
      this.$api({
        method: 'post',
        url: `/mdm/permission/query`,
        params: {
          typeIds: type,
          parentId: this.tableId
        },
        emulateJSON: true,
        successCallback: ({ data }) => {
          console.log(this.step)
          if (this.step === 1) {
            this.dataField = data
          } else {
            this.dataButtom = data
          }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    getSeletMenu () {
      this.$api({
        method: 'post',
        url: '/mdm/usercustomview/query',
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          data.forEach(item => {
            this.ids.push(item.id)
            item.header = 'root'
          })
          this.menuExpanded = this.ids
          this.dataMenu = transformToTreeFormat(data, 'id', 'parentId', 'children')
          this.menuSelected = this.dataMenu[0].id
          console.log(this.data)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    getMenu () {
      this.data = []
      // let arr = [{typeIds: 0}]
      //   typeIds: 0,
      //   typeIds: 2
      // }
      this.$api({
        method: 'post',
        url: '/mdm/permission/query',
        params: {
          typeIds: '0'
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          data.forEach(item => {
            this.ids.push(item.id)
            if (item.type === 0) {
              item.header = 'root'
            }
            if (item.isLeaf === 1) {
              item.tickable = true
            }
            if (item.isLeaf === null) {
              item.tickable = false
            }
            // item.name = String(item.code) + String(item.name)
          })
          this.nodeExpanded = this.ids
          this.data = transformToTreeFormat(data, 'id', 'parentId', 'children')
          console.log(this.data)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
/deep/.q-tab__label
  font-size 16px
.name
  padding-bottom 10px
</style>
